<template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="$locale('levelList.add.grade name')" prop="levelName">
                        <el-input v-model="form.levelName" :placeholder="$locale('levelList.add.Please enter the level name')" style="width:100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('levelList.add.sort')" prop="sort">
                        <el-input v-model="form.sort" :placeholder="$locale('levelList.add.Please enter sorting')" style="width:100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.notes')" prop="remark">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="$locale('levelList.add.Please enter a note')" v-model="form.remark">
                        </el-input> </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{ $locale('classList.add.determine') }}</el-button>
            <el-button @click="cancel">{{ $locale('classList.add.Cancel') }}</el-button>
        </div>
    </el-dialog>
</template>

  <script>
import { add, edit, getById } from "@/api/myClass/levelList";
import Treeselect from "@riophae/vue-treeselect";

export default {
    name: "TurnoverBoxAdd",
    components: { Treeselect },
    data () {
        return {
            // 遮罩层
            loading: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            deviceTurnoverBoxVOS: [
                {
                    deviceId: undefined,
                    deviceTotal: undefined
                }
            ],
            form: {},
            deviceList: [],
            listData: [],
            // 表单校验
            rules: {
                levelName: [
                    { required: true, message: this.$locale('levelList.add.The level name cannot be empty'), trigger: "blur" }
                ],
                sort: [
                    { required: true, message: this.$locale('levelList.add.Sorting cannot be empty'), trigger: "blur" }
                ]
            }
        };
    },
    created () {

    },
    methods: {
        // 表单重置
        reset () {
            // this.form = {
            //     deviceTurnoverBoxVOS: this.deepClone(this.deviceTurnoverBoxVOS)
            // };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd (ids) {
            this.reset();
            this.open = true;
            this.title = this.$locale('classList.add.added');
        },
        /** 修改按钮操作 */
        handleUpdate (row) {
            this.reset();
            getById({ id: row.id }).then(({ data }) => {
                this.form = data
                this.open = true;
                this.title = this.$locale('classList.add.modify');
                // if (!this.form.deviceTurnoverBoxVOS) this.$set(this.form, 'deviceTurnoverBoxVOS', row.deviceTurnoverBoxVOS)

            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let form = this.deepClone(this.form)
                    // form.deviceTurnoverBoxVOS = form.deviceTurnoverBoxVOS.filter(item => {
                    //     return item.deviceId || item.deviceTotal;
                    // });
                    if (form.id != undefined) {
                        edit(form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip5'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    } else {
                        add(form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip6'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
